<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= title %></title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=d6ded2f3c4f8a7439fb24b222c980329&plugin=AMap.Autocomplete"></script>
    <!--<script type="text/javascript" src="/javascript/lib/aliMap-1.4.6.js"></script>-->
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
    <div id="container"></div>
    <div id="myPageTop">
        <table>
            <tr>
                <td>
                    <label>按关键字搜索：</label>
                </td>
                <td class="column2">
                    <label>左击获取经纬度：</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="请输入关键字进行搜索" id="tipinput">
                </td>
                <td class="column2">
                    <input type="text" readonly="true" id="lnglat">
                </td>
            </tr>
        </table>
    </div>
    <div class="button-group">
        <input id="setCenter" type="button" class="button" value="改变地图中心点及缩放级别"/>
    </div>
    <script type="text/javascript">
        let map = new AMap.Map('container',{
            resizeEnable: true,
            zoom: 11,
            center: [116.397428, 39.90923]
        })
        map.plugin(["AMap.ToolBar"], function() {
            map.addControl(new AMap.ToolBar());
        });
        AMap.event.addDomListener(document.getElementById('setCenter'), 'click', function() {
            // 设置缩放级别和中心点
            map.setZoomAndCenter(14, [116.205467, 39.907761]);
            // 在新中心点添加 marker
            let marker = new AMap.Marker({
                map: map,
                position: [116.205467, 39.907761]
            });
        });

        //为地图注册click事件获取鼠标点击出的经纬度坐标
        var clickEventListener = map.on('click', function(e) {
            document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
        });
        var auto = new AMap.Autocomplete({
            input: "tipinput"
        });
        AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
            }
        }
    </script>
</body>
</html>